<template>
  <div>
    <van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="$router.go(-1)" />

    <van-field is-link readonly label="头像" @click="show = true" />
    <van-field is-link readonly label="昵称" @click="show = true" />
    <van-field is-link readonly label="手机号" @click="show = true" />
    <van-field is-link readonly label="性别" @click="show = true" />
    <van-field is-link readonly label="出生日期" @click="show = true" />
    <van-popup @close="show = false">
      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" />
    </van-popup>

    <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
    <van-popup v-model="show" round position="bottom">
      <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
        @finish="onFinish" />
    </van-popup>
  </div>
</template>

<script>
import { Field, Button, NavBar, Cascader, Popup, DatetimePicker } from "vant";
export default {
  // 按需引入“vant”
  components: {
    [Field.name]: Field,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Cascader.name]: Cascader,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
  },
  data () {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish ({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
  },
}
</script>

<style>
</style>